<script lang="ts">
import { ref } from 'vue';
import LogicFlow from '@logicflow/core';
import { io } from 'socket.io-client';
import { useRoute } from 'vue-router';
import debounce from 'lodash.debounce';
import { ElMessage, ElMessageBox } from 'element-plus';
import { SelectionSelect, DndPanel } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css';
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css';
import { groupData } from './data';

LogicFlow.use(SelectionSelect);

export default {
  setup() {
    const count = ref(0);
    const currentNode = ref(null);
    return {
      count,
      currentNode
    };
  },
  data() {
    return {
      lf: null,
      isHide: false,
      roomId: null,
      socket: null,
      activityMsg: [],
      dialogVisible: true,
      curUser: null,
      peopleNum: 0,
    };
  },
  unmounted() {
    this.$data.socket.emit('leave', curUser);
    this.$data.socket.disconnect();
  },
  mounted() {
    
    // socket init
    const route = useRoute();
    const roomId = route.params.id;
    this.$data.roomId = roomId;

    const socket = io('ws://localhost:3001', {
      withCredentials: true,
      extraHeaders: {
        'raw-url': window.location.href
      }
    });
    this.$data.socket = socket;

    let lf = new LogicFlow({
      container: this.$refs.container,
      width: 1100,
      height: 700,
      grid: false,
      adjustNodePosition: true,
      textEdit: false,
      stopZoomGraph: true,
      stopScrollGraph: true,
      stopMoveGraph: true,
      keyboard: {
        enabled: true
      },
      plugins: [SelectionSelect, DndPanel]
    });
    this.$data.lf = lf;
    lf.openSelectionSelect();
    lf.extension.dndPanel.setPatternItems([
      {
        label: '选区',
        icon: '',
        callback: () => {
          lf.extension.selectionSelect.openSelectionSelect();
          lf.once('selection:selected', () => {
            lf.extension.selectionSelect.closeSelectionSelect();
          });
        }
      },
      {
        type: 'circle',
        text: '开始',
        label: '开始节点',
        icon: ''
      },
      {
        type: 'rect',
        label: '用户任务',
        icon: '',
        className: 'important-node'
      },
      {
        type: 'rect',
        label: '系统任务',
        icon: '',
        className: 'import_icon'
      },
      {
        type: 'diamond',
        label: '条件判断',
        icon: ''
      },
      {
        type: 'circle',
        text: '结束',
        label: '结束节点',
        icon: ''
      }
    ]);
    lf.on(
      'node:mouseup,node:mousemove,node:delete,node:add,node:drop,edge:add,edge:delete,edge:adjust,edge:exchange-node,blank:mousemove,blank:drop',
      debounce(this.brodcastData, 80)
    );
    lf.render();

    socket.on('drawing', (data) => {
      console.log('客户端收到:', data);
      lf.render(data);
    });
    socket.on('sys', (msg) => {
      this.$data.activityMsg.push(msg);
    });
    socket.on('peopleNumJob', (num) => {
      this.$data.peopleNum = num;
    });
  },
  methods: {
    leaveRoom() {
      ElMessageBox.confirm('确认是否退出房间', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        console.log('ddd')
        this.$data.socket.emit('leave', this.$data.curUser);
        this.$data.dialogVisible = true;
        ElMessage({
          type: 'success',
          message: '退出成功'
        });
      });
    },
    confirmUser() {
      this.$data.socket.emit('join', this.$data.curUser);
      this.$data.dialogVisible = false;
    },
    brodcastData() {
      console.log('brodcastData');
      const socket = this.$data.socket;
      const graphData = this.$data.lf.getGraphData();
      socket.emit('drawing', graphData);
    }
  },
  components: {}
};
</script>

<template>
  <el-dialog v-model="dialogVisible" title="请输入你的名子" width="30%">
    <el-input v-model="curUser" placeholder="请输入你的名子" />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmUser"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <div class="room-content">
    <div class="left-panel">
      <div>当前房间号：{{roomId}}</div>
      <div>当前用户：{{curUser}}</div>
      <div>当前在线人数：{{ peopleNum }}</div>
      <el-button @click="leaveRoom" :disabled="curUser===null" type="primary">退出房间</el-button>
      <el-divider />
      <div v-for="item in activityMsg">
        {{ item }}
      </div>
    </div>
    <div class="flow-chart">
      <div ref="container" class="container"></div>
    </div>
  </div>
</template>

<style scoped>
.room-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}
.left-panel {
  margin-left: 20px;
  width: 300px;
  height: 700px;
  border: 1px solid cornflowerblue;
}
.flow-chart {
  position: relative;
  width: 1100px;
  height: 100%;
}
.flow-chart :deep(.lf-graph) {
  background: rgb(247, 247, 247);
}
.flow-chart :deep(.lf-red-node),
.flow-chart :deep(.lf-element-text) {
  cursor: move;
}
.flow-chart :deep(svg) {
  display: block;
}
.flow-chart-palette {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.setting-panel {
  position: absolute;
  top: 0;
  right: 0;
}
.flow-chart :deep(.lf-element-text) {
  pointer-events: none;
}
</style>
